<template>
	<div>
		<base-form v-model:filter-config="formConfig" v-model:filter-form="forms" @getFormValue="handleGetFormValues"
			@push-form-ref="handleRefDom">
		</base-form>
		 <el-button type="primary">	搜索</el-button>
		 <el-button type="primary">重置</el-button>
		 <el-button type="primary" @click="dialogFormBtn">新增医生</el-button>
		<div class="top-box">
			<div>查询结果：共计 <span>1242</span> 条数据</div>
			<div>刷新列表</div>
		</div>
		<!-- <BaseTable :columns="columns" :table-data="tableData"></BaseTable> -->
		<BaseTable class="base-stencil has_padding_top" :table-data="tableData" :isSearch="true" :columns="columns"
			:pagination="submitForm" :options="true" :loading="tloading" :option-show="false"
			@on-update-forms="getFormValue" >
		</BaseTable>
		
	</div>
	<el-dialog title="新增医生" v-model="dialogFormVisible" width="970">
	  <el-form :model="infoform" :inline="true">
	    <el-form-item label="医生姓名" :label-width="formLabelWidth">
	      <el-input v-model="infoform.username" autocomplete="off"></el-input>
	    </el-form-item>
		<el-form-item label="就诊性别" :label-width="formLabelWidth">
		  <el-radio-group v-model="infoform.resource" style="width: 166px;">
		    <el-radio label="男"></el-radio>
		    <el-radio label="女"></el-radio>
		  </el-radio-group>
		</el-form-item>
		<el-form-item label="医生编号" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="身份证号" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="医生年龄" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
	    <el-form-item label="医生职级" :label-width="formLabelWidth">
	      <el-select v-model="infoform.region" placeholder="请选择医生职级" style="width: 166px;">
	        <el-option label="主治医生" value="shanghai"></el-option>
	        <el-option label="主治医师" value="beijing"></el-option>
	      </el-select>
	    </el-form-item>
		<el-form-item label="手机号码" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="签约时长" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="从业经验" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="在职状态" :label-width="formLabelWidth" style="width: 100%;">
		  <el-radio-group v-model="infoform.resource" style="width: 166px;">
		    <el-radio label="在职"></el-radio>
		    <el-radio label="离职"></el-radio>
		  </el-radio-group>
		</el-form-item>
		<el-form-item label="基础服务费用" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="所属民族" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="擅长项目" :label-width="formLabelWidth">
		  <el-input v-model="infoform.username" autocomplete="off"></el-input>
		</el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
		<div @click="onSubmit" class="submitbtn">保存信息</div>
	  </div>
	</el-dialog>
</template>
<script setup>
	import {
		reactive,
		toRefs,
		ref,
		h
	} from "vue";
	import BaseTable from '../../../components/BaseTable/BaseTable.vue'
	import BaseForm from "@/components/BaseForm/BaseForm.vue";
	import {ElButton} from "element-plus";
	import { cloneDeep } from 'lodash-es'
	const state = reactive({
		columns: [{
				key: 'name',
				title: '在职状态',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '问诊状态',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '休假',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '医生编号',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '医生姓名',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '性别(男/女)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '年龄(岁)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '手机号码',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '擅长项目',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '从业经验(年)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '医师职级',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '服务基础费用(元)',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
			{
				key: 'name1',
				title: '操作',
				minWidth: 120,
				align: 'center',
				fixed: 'left',
			},
		],
		tableData: [{
			name: "1",
			name1: "1"
		}],
		submitForm: {
			orderBy: "",
			rule: "asc",
			page: {
				size: 10,
				current: 1
			},
			total: 0,

		},
		tloading: false,
		dialogFormVisible:false,
		 formLabelWidth: '110px'
	})
	const forms = ref({
		username: "",
		password: "",
	})
	const infoform = ref({
		username: "",
		username1:"",
		region: "",
	})
	const handleGetFormValues=()=>{
		forms.value = cloneDeep(e)
	}
	const handleRefDom=()=>{}
	const getFormValue=()=>{}
	const formConfig = ref({
		elForm: {
			labelPosition: "right",
			labelWidth: 70,
		},
		typeSetting: [
			[ {
				component: 'datePickerTwo',
				vModel: 'licenseDate',
				col: {
					span: 7
				},
				elModel: {
					style: {
						// width: "360px",
					}
				},
				formItem: {
					label: `创建时间`,
					prop: "licenseDate",
					style: {
						// width: "485px",
					}

				},
				isHidden: () => false,
				disabled: () => false,
			},
			{
			    col:{
			      span:5,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'医生性别',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},
			{
			    col:{
			      span:5,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'擅长项目',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},
			{
			    col:{
			      span:5,
			    },
			    component: 'select',
			    vModel: 'sourceChannelId',
			    elOption:{
			        // options:()=> {
			        //     options.channelList.map((item,index)=>{
			        //         if(['1','2','3'].includes(item.id)){
			        //                 item.className = 'hidden-options'
			        //             }
			        //         })
			        //     return options.channelList
			        // }, 
			    },
			    formItem:{
			        label:'医师职级',
			        prop:"sourceChannelId",
			    },
			    elModel: {
			        placeholder: "请选择",
			        clearable: true,
			        style: {
			            // width: "780px",
			        },
			        props:{
			            label:"sourceChannel",
			            value:"id"
			        },
			        onClick:(e)=>{
			        },
			        onChange:(e)=>{
			            options.channelList.map((item)=>{
			                if(item.id == e){
			                    state.forms.sourceChannel = item.sourceChannel
			                }
			            })
			        }
			    },
			    isHidden: () => false,
			    disabled: () => false,
			},
			{
				component: 'input',
				vModel: 'licenseNumber',
				col: {
					span: 5
				},
				formItem: {
					label: `医生姓名`,
					prop: "licenseNumber",
				},
				elModel: {
					placeholder: `请输入`,
					type: 'text',
					clearable: true,
					style: {
						// width: "360px",
					}
				},
				isHidden: () => false,
				disabled: () => false,
			},{
				component: 'input',
				vModel: 'licenseNumber',
				col: {
					span: 5
				},
				formItem: {
					label: `预约手机`,
					prop: "licenseNumber",
				},
				elModel: {
					placeholder: `请输入`,
					type: 'text',
					clearable: true,
					style: {
						// width: "360px",
					}
				},
				isHidden: () => false,
				disabled: () => false,
			}, ]
		// 	,()=>{
  //   return h(ElButton,{
  //     round:false,
  //     type:"primary",
  //     loading:state.loading,
  //     style:{
  //       width:"100px",
  //       height:"40px",
  //       fontSize:"16px",
  //       marginTop:"20px"
  //     },
  //     color:"#007BD3",
  //     onClick:()=>{
  //       let {validate} = baseForm.value
  //       validate(e=>{
  //         if(e){

  //         }
  //       })
  //     },
  //     disabled:false,
  //   },{default:()=> ("搜索")})
  // },()=>{
  //   return h(ElButton,{
  //     round:false,
  //     loading:state.loading,
  //     style:{
  //       width:"100px",
  //       height:"40px",
  //       fontSize:"16px",
  //       marginTop:"20px",
  //     },
  //     onClick:()=>{
  //       let {validate} = baseForm.value
  //       validate(e=>{
  //         if(e){

  //         }
  //       })
  //     },
  //     disabled:false,
  //   },{default:()=> ("重置")})
  // },
		]
	})
	const dialogFormBtn=()=>{
		state.dialogFormVisible=true
		console.log('123')
	}
	const {
		columns,
		tableData,
		submitForm,
		tloading,
		dialogFormVisible,
		formLabelWidth
	} = toRefs(state)
</script>
<style scoped lang="scss">
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 20px;
	}
	.submitbtn{
		width: 404px;
		height: 65px;
		line-height: 65px;
		text-align: center;
		border-radius: 5px;
		background: linear-gradient(30deg, rgba(59,182,254,1) 13.4%,rgba(142,76,183,1) 85.87%);
		color: #fff;
		font-size: 20px;
		margin: 0 auto;
	}
</style>